<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import WaterFall_01 from '@/components/WaterFall_01/WaterFall_01.vue';
// 屏幕尺寸变化
let pageWidth = ref(window.innerWidth);
const app = ref<HTMLElement | null>(null);
const updateWidth = () => {
  pageWidth.value = window.innerWidth;
};
onMounted(() => {
  window.addEventListener('resize', updateWidth);

  const wrap = scrollbarRef.value?.wrapRef;
  if (wrap) {
    wrap.addEventListener('scroll', () => {
      const distance = getScrollBottomDistance();
      if (distance <= 100) {
        waterfallRef.value?.fetchMessageList(6)
      }
    });
  }
});
onUnmounted(() => {
  window.removeEventListener('resize', updateWidth);
});
// 获取 el-scrollbar 距离底部的距离（单位：像素）
const getScrollBottomDistance = () => {
  const wrap = scrollbarRef.value?.wrapRef;
  if (!wrap) return 0;
  return wrap.scrollHeight - wrap.scrollTop - wrap.clientHeight;
};
// 下拉刷新
const isPulling = ref(false)
const isRefreshing = ref(false)
const pullStart = ref(0)
const pullDistance = ref(0)
const triggerDistance = ref(60)

const contentRef = ref<HTMLDivElement>(null)
const pullRefreshRef = ref<HTMLDivElement>(null);
const scrollbarRef = ref()

const onTouchStart = (event: TouchEvent) => {
  if (contentRef.value && scrollbarRef.value?.wrapRef?.scrollTop === 0) {
    isPulling.value = true;
    pullStart.value = event.touches[0].clientY;
  }
};
const onTouchMove = (event: TouchEvent) => {
  if (isPulling.value && contentRef.value) {
    pullDistance.value = event.touches[0].clientY - pullStart.value;
    if (pullDistance.value < 0) {
      pullDistance.value = 0;
    } else if (pullDistance < 20) {
      return; // 小于10px不处理
    } else if (pullDistance.value >= triggerDistance.value) {
      pullDistance.value = triggerDistance.value;
    }
    pullRefreshRef.value.style.height = `${pullDistance.value}px`;
    contentRef.value.style.transform = `translateY(${pullDistance.value}px)`;
  }
};
const waterfallRef = ref<HTMLDivElement>(null);
const onTouchEnd = (event: TouchEvent) => {
  if (pullDistance.value >= triggerDistance.value) {
    contentRef.value.style.transform = `translateY(0px)`;
    pullRefreshRef.value.style.height = `0px`;
    waterfallRef.value?.fetchMessageList(Math.floor(Math.random() * 5) + 1);
    isPulling.value = false;
    pullDistance.value = 0;
  }
};
</script>

<template>
    <div class="container">
      <!-- 下拉刷新区域 -->
      <div
        class="pull-refresh"
        ref="pullRefreshRef"
      >
        <div class="refresh-indicator">
          <div v-if="isRefreshing"></div>
          <div v-else-if="pullDistance >= triggerDistance">释放立即刷新</div>
          <div v-else>下拉刷新</div>
        </div>
      </div>
      <!-- 列表内容 -->
      <div class="list-content"
        ref="contentRef"
        @touchstart.passive="onTouchStart"
        @touchmove.passive="onTouchMove"
        @touchend.passive="onTouchEnd"
      >
        <el-scrollbar height="100%" ref="scrollbarRef">
          <WaterFall_01 :pagesize="{ width: pageWidth }" ref="waterfallRef"></WaterFall_01>
        </el-scrollbar>
      </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 10px;
  position: relative;
  .pull-refresh {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.3s ease; 
    color: #a5a2a2;
  }
  .list-content {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease; 
  }
}
</style>
